<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/myCoupons.css">
    <link rel="stylesheet" href="css/buyCoupons.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/myCoupons.js"></script>
    <script src="js/buyCoupons.js"></script>

    <title>购买优惠券</title>
</head>

<body>
    <div class="buycoupons_3Q">

        <!-- 购买剪发券 -->
        <div class="coupons_title">购买剪发券</div>

        <!-- 提示 -->
        <div class="coupons_suggest">
            再买
            <span>4</span>张可享
            <span>买5赠1</span>,再买
            <span>9</span>张可享
            <span>买10赠3</span>
        </div>

        <!-- 选择优惠券数量 -->
        <div class="usable_coupons">
            <div class="coupons_details">
                <div class="coupons_left">￥
                    <span>39</span>
                </div>
                <div class="coupons_center">
                    <p class="cou_center_top">
                        <text>全市门店通用</text>
                        <img src="images/buy_coupons/message.png">
                    </p>
                </div>
                <div class="coupons_right">
                    <img class="sub_coupon" id="subcoupon" src="images/buy_coupons/_@2x.png">
                    <div class="coupons_num" id="couponsnum">1</div>
                    <img class="add_coupon" id="addcoupon" src="images/buy_coupons/+@2x.png">
                </div>
            </div>
            <!-- 赠品券 -->
            <div class="coupons_details coupons_details_complimentary">
                <div class="coupons_left">￥
                    <span>39</span>
                </div>
                <div class="coupons_center">
                    <p class="cou_center_top">
                        <text>全市门店通用</text>
                        <img src="images/buy_coupons/message.png">
                    </p>
                </div>
            </div>
        </div>

        <!-- 底部确认支付 -->
        <div class="footer_confirmpay">
            <div class="footer_price">应付金额
                <text>
                    <span>￥</span><text id="price">39</text>
                </text>
            </div>
            <button class="footer_btn" id="pay">结算</button>
        </div>

    </div>

</body>

</html>